﻿@page "/component/common/text"

<Pager DataSource="@(new List<string> { "Standard","Size" })">
    <Body>
<Header2 Divider>
    Text
    <SubHeader>
        A text is used to style some inline text with a simple color
    </SubHeader>
</Header2>

<PresentationPart Title="Standard">
    <RunTemplate>
        <Segment>
            Here is <Text Color="Color.Red">red</Text> text, and this is <Text Color="Color.Blue">blue</Text> text.
        </Segment>
        <Segment Inverted>
            Here is <Text Color="Color.Red" Inverted>red</Text> text, and this is <Text Color="Color.Blue" Inverted>blue</Text> text.
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment>
    这是 <Text Color=""Color.Red"">红色</Text> 的文本，而这是 <Text Color=""Color.Blue"">蓝色</Text> 的文本。
</Segment>
<Segment Inverted>
    这是 <Text Color=""Color.Red"" Inverted>红色</Text> 的文本，而这是 <Text Color=""Color.Blue"" Inverted>蓝色</Text> 的文本。
</Segment>
```
")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="Size">
    <RunTemplate>
        <Segment>
            <p>Starting with <Text Color="Color.Red" Size="Size.Mini">Mini</Text> text</p>
            <p>And then <Text Color="Color.Red" Size="Size.Tiny">Tiny</Text> text</p>
            <p>Otherwise <Text Color="Color.Red" Size="Size.Small">Small</Text> text</p>
            <p>Default is <Text Color="Color.Red" Size="Size.Medium">Medium</Text> text</p>
            <p>Maybe <Text Color="Color.Red" Size="Size.Large">Large</Text> text</p>
            <p>The next should be <Text Color="Color.Red" Size="Size.Big">Big</Text> text</p>
            <p>Could change to <Text Color="Color.Red" Size="Size.Huge">Huge</Text> text</p>
            <p>The last is <Text Color="Color.Red" Size="Size.Massive">Massive</Text> text</p>
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment>
    <p>Starting with <Text Color=""Color.Red"" Size=""Size.Mini"">Mini</Text> text</p>
    <p>And then <Text Color=""Color.Red"" Size=""Size.Tiny"">Tiny</Text> text</p>
    <p>Otherwise <Text Color=""Color.Red"" Size=""Size.Small"">Small</Text> text</p>
    <p>Default is <Text Color=""Color.Red"" Size=""Size.Medium"">Medium</Text> text</p>
    <p>Maybe <Text Color=""Color.Red"" Size=""Size.Large"">Large</Text> text</p>
    <p>The next should be <Text Color=""Color.Red"" Size=""Size.Big"">Big</Text> text</p>
    <p>Could change to <Text Color=""Color.Red"" Size=""Size.Huge"">Huge</Text> text</p>
    <p>The last is <Text Color=""Color.Red"" Size=""Size.Massive"">Massive</Text> text</p>
</Segment>
```
")
    </CodeTemplate>
</PresentationPart>
    </Body>
</Pager>